<template>
  <div class="footer">
    <router-link class="tab" :class="active1" to="/">
      <span class="icon"></span>
      <span class="type">首页</span>
    </router-link>
    <router-link class="tab" :class="active2" to="/charge">
      <span class="icon"></span>
      <span class="type">充值</span>
    </router-link>
    <router-link class="tab" :class="active3" to="/user-center">
      <span class="icon"></span>
      <span class="type">我的</span>
    </router-link>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      active1: "",
      active2: "",
      active3: ""
    };
  },
  props: ["selected"],
  created: function() {
    switch (this.selected) {
      case 1: {
        this.active1 = "active";
        break;
      }
      case 2: {
        this.active2 = "active";
        break;
      }
      case 3: {
        this.active3 = "active";
        break;
      }
    }
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.footer {
  border-top: 1px solid #e1e4eb;
}
.footer .tab {
  text-align: center;
  font-size: 0.2rem;
  width: 33.33%;
  color: #999;
  font-weight: bold;
  height: 100%;
  position: relative;
  .icon {
    position: absolute;
    width: 0.44rem;
    height: 0.44rem;
    top: 0.16rem;
    left: 50%;
    margin-left: -0.22rem;
  }
  .type {
    position: absolute;
    width: 2rem;
    text-align: center;
    bottom: 0.08em;
    left: 50%;
    margin-left: -1rem;
  }
  &.active {
    color: #7373ff;
  }
  &:first-child {
    .icon {
      background: url("../assets/images/tabindex.png") no-repeat top center;
      background-size: contain;
    }
    &.active {
      .icon {
        background: url("../assets/images/tabindexh.png") no-repeat top center;
        background-size: contain;
      }
    }
  }
  &:nth-child(2) {
    .icon {
      width: 0.78rem;
      height: 0.5rem;
      top: auto;
      bottom: 0.38rem;
      margin-left: -0.4rem;
      background: url("../assets/images/charge2.png") no-repeat top center;
      background-size: contain;
    }
  }
  &:last-child {
    .icon {
      background: url("../assets/images/tabuser.png") no-repeat top center;
      background-size: contain;
    }
    &.active {
      .icon {
        background: url("../assets/images/tabuserh.png") no-repeat top center;
        background-size: contain;
      }
    }
  }
}

.footer {
  right: 0rem;
  height: 0.98rem;
  position: fixed;
  left: 0rem;
  bottom: 0rem;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
